﻿@{
    Layout = "";

}



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Medussa Admin Panel</title>
    <meta charset="utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width">

    <!--bootstrap-->
    <link rel="stylesheet" href="~/Content/bootstrap.css">
    <link rel="stylesheet" href="~/Content/bootstrap-responsive.css">
    <script src="~/Scripts/knockout-2.2.1.js" type="text/javascript" ></script> 
    <script src="~/Scripts/jquery-2.0.2.min.js"></script>
    <link rel="stylesheet" href="~/Content/main-test.css" type="text/css" />
    <script src="~/Scripts/js/Main.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    


  @*  <script src="~/Scripts/js/Application_koViewModel.g.js" type="text/javascript" ></script>
    <script src="~/Scripts/js/Application_koGetBindingScript.js"></script>*@

    <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#myModal").draggable({
    handle: ".modal-header"
});
});//]]>  

</script>
    
</head>

<body>


     <a class="btn btn-primary btn-large" href="#myModal" data-toggle="modal">Launch demo modal</a>


<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade" id="myModal">
    <div class="modal-header">
      <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
      <h3 id="myModalLabel">Modal Heading</h3>
    </div>
    <div class="modal-body">
      <h4>Drag header around to test</h4>
      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
    </div>
    <div class="modal-footer">
      <button data-dismiss="modal" class="btn">Close</button>
      <button class="btn btn-primary">Save changes</button>
    </div>
  </div>



    <header class="navbar navbar-inverse navbar-fixed-top">
        <section class="navbar-inner">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">
                <img class="" src="~/Images/logo.png" /></a>
            <nav class="nav-collapse collapse">
                <ul class="topnav nav pull-right">
                    <li class="active"><a href="#"><i>
                        <img src="~/Images/home.png" /></i>Home</a></li>
                    <li><a href="#register"><i>
                        <img src="~/Images/register.png" /></i>Register</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i>
                            <img src="~/Images/login.png" /></i>Login <b class="logincaret caret"></b></a>
                        <ul class="login-pop dropdown-menu">
                            <li>
                                <form class="nomargin myform">
                                    <input class="span3" type="text" placeholder="User Name">
                                    <input class="span3" type="password" placeholder="Password">
                                    <button type="submit" class="submit-btn btn pull-right">SUBMIT</button>
                                </form>
                            </li>

                        </ul>
                    </li>
                </ul>

            </nav>
        </section>
    </header>


    <section class="row-fluid">
        <section class="span12">

            <section class="row-fluid">
                <section class="span10">

                    <section class="row-fluid">
                        <aside class="left-nav span2">

                            <ul>
                                <li><a href=""><i>
                                    <img src="~/Images/profile.png" /><br />
                                </i><span>My Profile</span></a></li>
                                <li><a href=""><i>
                                    <img src="~/Images/settings.png" /><br />
                                </i><span>Settings</span></a></li>
                                <li><a href=""><i>
                                    <img src="~/Images/help.png" /><br />
                                </i><span>Help</span></a></li>
                            </ul>



                        </aside>
                        <section class="span10">

                            <article class="row-fluid">
                                <section class="blue span4">



                                 












                                    <p class="tital">
                                        Etiam vel neque eget
                                    </p>
                                    <p>
                                        Etiam vel neque eget nisi porttitor imperdiet at sed augue. Donec sit amet nulla pellentesque, accumsan lorem et, mollis augue. Etiam gravida urna ac neque pharetra sodales. Fusce iaculis nulla id tellus accumsan, ac vehicula lorem ultricies. Cras venenatis, tortor at viverra aliquet, nibh tortor ullamcorper nibh, sed tempus dui nisl a nisl. Praesent convallis vehicula metus, quis molestie urna tincidunt sit amet. Morbi porta, nisl et tempus condimentum,
                                    </p>

                                </section>
                                <section class="green span4">
                                    <p class="tital">
                                        Etiam vel neque eget
                                    </p>
                                    <p>
                                        Etiam vel neque eget nisi porttitor imperdiet at sed augue. Donec sit amet nulla pellentesque, accumsan lorem et, mollis augue. Etiam gravida urna ac neque pharetra sodales. Fusce iaculis nulla id tellus accumsan, ac vehicula lorem ultricies. Cras venenatis, tortor at viverra aliquet, nibh tortor ullamcorper nibh, sed tempus dui nisl a nisl. Praesent convallis vehicula metus, quis molestie urna tincidunt sit amet. Morbi porta, nisl et tempus condimentum,
                                    </p>
                                </section>
                                <section class="orange span4">
                                    <p class="tital">
                                        Etiam vel neque eget
                                    </p>
                                    <p>
                                        Etiam vel neque eget nisi porttitor imperdiet at sed augue. Donec sit amet nulla pellentesque, accumsan lorem et, mollis augue. Etiam gravida urna ac neque pharetra sodales. Fusce iaculis nulla id tellus accumsan, ac vehicula lorem ultricies. Cras venenatis, tortor at viverra aliquet, nibh tortor ullamcorper nibh, sed tempus dui nisl a nisl. Praesent convallis vehicula metus, quis molestie urna tincidunt sit amet. Morbi porta, nisl et tempus condimentum,
                                    </p>
                                </section>

                                <div id="SearchDialog">
    <div class="SearchTitle" >
      <div class="SearchTitleText">Search Friends</div>
      <div class="SearchTitleFilterButton">
        <span>Filter:</span>
        <input type="text" class="SearchFilter"    data-bind='value: filter, valueUpdate: "afterkeydown"'  />
        <button class="SearchButtonClose" ></button>
      </div>
      <div class="SearchClear"></div>
     </div>
     <div class="SearchContent" data-bind="foreach: filteredApplication">
         <li><a href="#" data-bind="text: $data.ApplicationName, click: $parent.select"></a></li>
     </div>
     <div data-bind="visible: filteredApplication().length == 0">
       No Results
     </div>
</div> 

                            </article>

                            <section class="form-bg span12">

                                <form class="myform well span7">
                                    <div id="legend">
                                        <legend class="myform-legand">
                                            <p>EDIT APPLICATION DETAILS</p>
                                        </legend>
                                    </div>
                                    <div class="formcenter">
                                        <p>First Name</p>
                                        <input type="text" class="span7" placeholder="Your First Name" required>
                                        <p>Last Name</p>
                                        <input type="text" class="span7" placeholder="Your Last Name">
                                        <p>Email Address</p>
                                        <input type="text" class="span10" placeholder="Your email address">
                                        <label>
                                            <p>Select Data List</p>
                    <datalist id="test">
                        <select name="test" class="span7">
                            <option value="list 1">List 1</option>
                            <option value="list 2">list 2</option>
                            <option value="list 3">list 3</option>
                        </select>
                        other
                    </datalist>
                                            <input type="text" name="test" list="test">
                                        </label>

                                        <p>Select </p>
                                        <div class="styled span7">
                                            <select>
                                                <option>List</option>
                                                <option>list 2</option>
                                                <option>list 3</option>
                                            </select>
                                        </div>
                                        <br /><br />
                                        <p>Check box</p>
                                        <p>
                                            <input type="checkbox" id="male" /><label class="custom" for="male">Checkbox</label>
                                            <br />
                                            <input type="radio" name="option" id="female" /><label class="custom" for="female">Radio 1</label>
                                            <input type="radio" name="option" id="female2" /><label class="custom" for="female2">Radio 2</label>
                                        </p>

                                        <button class="cancel-btn btn "><i class="icon-white icon-ok"></i>Select</button>
                                        <button href="#" class="submit-btn btn "><i class="icon-white icon-ok"></i>Select</button>

                                    </div>

                                </form>

                                <h1>Lorem ipsum dolor sit amet, </h1>
                                <h2>Lorem ipsum dolor sit amet, </h2>
                                <h3>Lorem ipsum dolor sit amet, </h3>
                                <h4>Lorem ipsum dolor sit amet, </h4>
                                <p>Etiam vel neque eget nisi porttitor imperdiet at sed augue. Donec sit amet nulla pellentesque, accumsan lorem et, mollis augue. Etiam gravida urna ac neque pharetra sodales. Fusce iaculis nulla id tellus accumsan, ac vehicula lorem ultricies. Cras venenatis, tortor at viverra aliquet, nibh tortor ullamcorper nibh, sed tempus dui nisl a nisl. Praesent convallis vehicula metus, quis molestie urna tincidunt sit amet. Morbi porta, nisl et tempus condimentum,</p>
                            </section>



                            <section class="table-bg span12">
                                <table  class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <td colspan="5" class="filter-head">
                                                <label>

                                                    <datalist id="test">
                                                        <select name="test" class="span4">
                                                            <option value="list 1">List 1</option>
                                                            <option value="list 2">list 2</option>
                                                            <option value="list 3">list 3</option>
                                                        </select>
                                                        other
                                                    </datalist>
                                                    <input type="text" name="test" list="test" class="filter-input" placeholder="Search here">
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>

                                            <th data-bind="sort: { arr: sortRecords, prop: 'ApplicationID' }">Application ID</th>
                                            <th data-bind="sort: { arr: sortRecords, prop: 'ApplicationName' }">Application Name</th>
                                            <th data-bind="sort: { arr: sortRecords, prop: 'CreatedBy' }">Created By</th>

                                            <th data-bind="sort: { arr: sortRecords, prop: 'ModifiedBy' }">Modified By</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="template: {name: 'applicationList', foreach: ApplicationList}">
                                        @*<tr>
                                            <td data-bind="text: ApplicationID">200501A</td>
                                            <td data-bind="text: ApplicationName">ullamcorper sit amet</td>
                                            <td data-bind="text: CreatedBy">Sithila</td>
                                            <td data-bind="text: ModifiedBy">2013-05-20</td>
                                        </tr>
                                        <tr>
                                            <td data-bind="text: ApplicationID">200501A</td>
                                            <td data-bind="text: ApplicationName">ullamcorper sit amet</td>
                                            <td data-bind="text: CreatedBy">Sithila</td>
                                            <td data-bind="text: ModifiedBy">2013-05-20</td>
                                        </tr>*@

                                        <script id="applicationList" type="text/html">
                                            <tr>
                                                <td data-bind="text: ApplicationID"></td>
                                                <td data-bind="text: ApplicationName"></td>
                                                <td data-bind="text: CreatedBy"></td>
                                                <td data-bind="text: ModifiedBy"></td>
                                                <td><button class="cancel-btn btn "><i class="icon-white icon-ok"></i>Delete</button>
                                        <button href="#" class="submit-btn btn "><i class="icon-white icon-ok"></i>Edit</button></td>
                                            </tr>
                                        </script>
                                    </tbody>
                                </table>

                                


                            </section>



                        </section>
                    </section>
                </section>
                <aside class="right_bar span2">

                    <ul>
                        <li class="green-link"><a href="">ipsum dolor sit amet, 
consectetur adipiscing elit. 
Pellentesque </a></li>
                        <li class="blue-link"><a href="">ipsum dolor sit amet, 
consectetur adipiscing elit. 
Pellentesque </a></li>

                    </ul>

                    <hgroup class="branding-right">

                    <h3><a href="">T2.WebSecurity</a></h3>
                        <p >Part of the Myth Suite</p>

                    </hgroup>
                </aside>
            </section>
        </section>
    </section>


    <footer >
        <section class="row">
            <ul class="span3">
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>

            </ul>
            <ul class="span3">
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>

                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>

            </ul>
            <ul class="span3">
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>

            </ul>
            <ul class="span3">
                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>

                <li>dadaaaaaaaaaaa</li>
                <li>dadaaaaaaaaaaa</li>
            </ul>
        </section>
    </footer>
</body>
</html>

